<template>
	<div class="notice">
		<HeaderTop :title="`消息中心`"></HeaderTop>
		<div class="extract-content-title">
			<div class="extract-content-title-list" :class="activedTitle === 1 ? 'title-chosing' : ''" @click="switchTitle(1)">平台公告</div>
			<div class="extract-content-title-list" :class="activedTitle === 2 ? 'title-chosing' : ''" @click="switchTitle(2)">系统消息</div>
		</div>
		
		<div class="my-message-content">
			<div class="my-message-list" v-for="(item,index) in noticeData" :key="index" @click="toPushdetail(index)" v-if="activedTitle === 1">
				<div class="message-title">
					<div class="line1">
						<div class="line1-fonts">{{item.title}}</div>
					</div>
					<div class="line2">{{item.messageInfo}}</div>
				</div>
				<div class="message-bottom">
					<div class="left-date">{{item.addTime}}</div>
					<div class="right-to-detail">查看详情</div>
				</div>
			</div>
			<div class="my-message-list" v-for="(item,index) in msgData" :key="index" @click="toPushdetail(index)" v-if="activedTitle === 2">
				<div class="message-title">
					<div class="line2 line3">{{item.content}}</div>
				</div>
				<div class="message-bottom">
					<div class="left-date">{{item.addTime}}</div>
					<div class="right-to-detail">查看详情</div>
				</div>
			</div>
		</div>
		<van-popup v-model="showSelect" class="detail-popup">
			<div class="detail-popup-title">{{popupTitle}}</div>
			<div class="detail-popup-content">
				<div class="detail-popup-content-title">{{noticeTitle}}</div>
				<div class="detail-popup-content-show" v-html="noticeContent"></div>
				<div class="detail-popup-content-date">{{noticeDate}}</div>
			</div>
			<div class="detail-popup-btn" @click="closePopup">确定</div>
		</van-popup>
	
	</div>
</template>

<script>
import HeaderTop from '../../components/top/top';

export default {
	name: 'notice',
	components: {
		HeaderTop,
	},
	data() {
		return {
			noticeData: [],
			msgData: [
				{content:'【信息安全提醒】如有以官方名义冒充平台工作人员经非官方联系渠道联系代理进行私下交易等行为，欢迎联系平台有奖举报。'},
				{content:'【资金安全提醒】亲爱的伙伴，如需为会员提供上分服务，为保证您的资金安全，请务必核实账号实际到账情况后给予协助，避免发生P图骗分情况发生，请提高警惕，谨防上当受骗！感谢您的理解和支持。'},
				// {content:'请优先使用 https 类型的域名做为推广链接。代理推广域名请查看这里：代理管理->域名列表。'},
				// {content:'因新APP上线，对接数据有延时。所以佣金结算日调整至每月5-15号，谢谢大家理解。'},
				// {content:'请所有的代理下载skype作为以后沟通工具。下载完成后点击+联系人 hao5981947025@126.com 以后所有事宜将会在skype上对接，谢谢大家理解。'},
				// {content:'电脑端下载网址是 http://www.mydown.com/soft/469/577207469.shtml  苹果手机https://ios.emc520.com/  安卓手机https://az.emc520.com/'},
				// {content:'所有代理可以添加此微信联系招商部门。添加时请标注代理账号，谢谢大家合作。'},
				// {content:'招商QQ： 15025096 、 15028119'},
			],
			showSelect: false,
			activedTitle: 1,
			noticeTitle: "",
			noticeContent: "",
			replaceContent: "",
			noticeDate: "",
			pageNumber: 1,
			popupTitle:'',
			
		}
	},
	mounted() {
		this.loadTop();
	},
	methods: {
		switchTitle(value) {
			this.activedTitle = value;
		},
		loadTop() {
			let params = {
				pageNumber: this.pageNumber,
				pageSize: 30
			}
			this.ServerAPI.postAPI(this.API.notice, params, this.webnotice)
		},
		webnotice(success, data) {
			if (success) {
				if (data.code == '0000') {
					this.noticeData = data.data;
				}
			}
		},
		inBoxDetail(){
		
		},
		toPushdetail(index) {
			this.showSelect = true
			this.noticeTitle = ''
			this.noticeDate = ''
			if(this.activedTitle === 1){
				this.popupTitle = '平台公告'
				this.noticeTitle = this.noticeData[index].title
				this.noticeContent = this.noticeData[index].content
				this.noticeDate = this.noticeData[index].addTime
				this.replaceContent = this.noticeContent.replace(/\\n/g, "<br>")
				this.replaceContent = this.replaceContent.replace(/\\t/g, "&emsp;")
			}else if(this.activedTitle === 2){
				this.popupTitle = '系统消息'
				this.noticeContent = this.msgData[index].content;
			}
	
		},
		closePopup() {
			this.showSelect = false;
		},
	}
}
</script>

<style lang="scss" scoped>
.notice {
	width: 100%;
	background: #FFFFFF;
	height: 100%;
	.extract-content-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 50%;
		margin: .3rem auto 0;
		text-align: center;
		font-size: .28rem;
		font-weight: bold;
		.extract-content-title-list {
			width: 50%;
			color: rgb(114,114,114);
			height: .6rem;
		}
		.title-chosing {
			color: rgb(0, 71, 157);
			border-bottom: rgb(0, 71, 157) 5px solid;
		}
	}
	.my-message-content {
		border-top: rgb(210,210,210) 1px solid;
		padding: 0 .2rem;
		.my-message-list {
			border-bottom: rgb(238,238,238) 1px solid;
			padding: .3rem 0;
			.message-title {
				.line1 {
					display: flex;
					align-items: center;
					font-size: .28rem;
					font-weight: bold;
					.readed {
						width: .2rem;
						height: .2rem;
						background: rgb(0,71,157);
						border-radius: 50%;
					}
					.unread {
						width: .2rem;
						height: .2rem;
						background: rgb(160,160,160);
						border-radius: 50%;
					}
					.line1-fonts {
					}
				}
				.line2 {
					color: rgb(124,124,124);
					margin-top: .1rem;
				}
				.line3 {
					height: .5rem;
					//width: 100%;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
			.message-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: .25rem;
				.left-date {
					color: rgb(124,124,124);
				}
				.right-to-detail {
					width: 2rem;
					background: rgb(0,71,157);
					color: #FFFFFF;
					height: .6rem;
					line-height: .6rem;
					text-align: center;
					border-radius: .1rem;
				}
			}
			
		}
	}
	.detail-popup {
		border-radius: .1rem;
		width: 5.5rem;
		.detail-popup-title {
			height: 1rem;
			background: #022595;
			color: #FFFFFF;
			line-height: 1rem;
			text-align: center;
			font-size: .32rem;
		}
		.detail-popup-content {
			padding: .3rem .2rem;
			max-height: 5rem;
			overflow-y: auto;
			.detail-popup-content-title {
				font-size: .28rem;
				color: rgb(46,46,46);
				font-weight: bold;
				text-align: center;
			}
			.detail-popup-content-show {
				font-size: .26rem;
				color: rgb(124,124,124);
				margin: .2rem 0 .4rem;
				line-height: .45rem;
				word-wrap:break-word;
			}
			.detail-popup-content-date {
				font-size: .26rem;
				color: rgb(124,124,124);
				text-align: right;
			}
		}
		.detail-popup-btn {
			height: .8rem;
			border-top: rgb(191,191,191) 1px solid;
			color: rgb(47,47,48);
			line-height: .8rem;
			text-align: center;
			font-weight: bold;
			font-size: .3rem;
		}
	}
	
}
</style>
